<script>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import { Plus, Download, Search, Edit, View, Delete, Location } from "@element-plus/icons-vue";
// const pageSize4 = ref(100)
// const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const pageNum=ref(100)
const total=ref(0)
const pageSize=ref(10)
const dialogVisible = ref(false)

export default {
  name: "Main",
  components: {
    Plus,
    Download,
    Search,
    Edit,
    View,
    Delete,
    Location
  },
  data() {
    const item = {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    }
    const tableData = ref(Array.from({ length: 20 }).fill(item))
    return {
      item,
      tableData:[],
      // currentPage4:4,
      // currentPage3:3,
      // currentPage2:2,
      // currentPage:1,
      pageSize:7,
      pageNum:1,
      dialogVisible: false,
      total:5,
      rules:{
        "id":[
          {
            required:true,
            message:"请输入id号",
            trigger: "blur"
          }
        ],
        "username":[
          {
            required:true,
            message:"请输入用户名",
            trigger: "blur"
          }
        ],
        "name":[
          {
            required:true,
            message:"请输入名称",
            trigger: "blur"
          }
        ],
        "password":[
          {
            required:true,
            message:"请输入密码",
            trigger: "blur"
          }
        ],
        "age":[
          {
            required:true,
            message:"请输入年龄",
            trigger: "blur"
          }
        ],
        "sex":[
          {
            required:true,
            message:"请输入性别",
            trigger: "blur"
          }
        ],
        "phone":[
          {
            required:true,
            message:"请输入电话号码",
            trigger: "blur"
          }
        ],

      },
      form: { // 表单数据
        id:'',
        username: '',
        name: '',
        password: '',
        age: '',
        sex: '',
        phone: '',

      },
    }
  },
  methods:
      {
        loadGet(){
          this.$axios.get(this.$httpUrl+"/user/list/").then(res=>{
            console.log(res)
           if (res.status===200)
           {this.tableData=res.data;}
            else
            {
              alert("错误")
            }
          })
        },
        loadPost(){
          this.$axios.post(this.$httpUrl+"/user/listP/",{

          }).then(res=>res.data).then(res=>{
            console.log(res)
            // console.log('测试用户角色ID:',res.role_id);
            this.tableData=res.data;
          })
        },
        handleCurrentChange(val){
          console.log(`current page: ${val}`)
          this.pageNum=val
          this.loadPostPageC()
        },
        loadPostPageC(){
          this.$axios.post(this.$httpUrl+"/user/listPageC",{
            pageSize:this.pageSize,
            pageNum:this.pageNum
          }).then(res=>res.data).then(res=>{
            console.log(res)
            this.tableData=res.data
            this.total=res.total || res.data.length
          })
        },
        addDatas(){
          //点击这个就会弹出一个页面，要求填写数据，数据写入数据库中的那种
          this.dialogVisible = true;

        },
        onSubmit(){
          this.dialogVisible = false
          //然后弹出一个弹窗添加成功的
          this.$axios.post(this.$httpUrl+"/user/save",this.form,
          {
              headers: {
            'Content-Type': 'application/json'  // 明确指定 JSON 格式
          }
          }
          )
        .then(res=>res.data).then(res=>{
                console.log(res)
            this.tableData=res.data
          }).then(()=>{
            ElMessage({
              type: 'success',
              message: '添加成功',
            })
          })
        }

      },

  beforeMount(){
    // this.loadGet();
    this.loadPostPageC();
    // this.loadPost();
  }
}
</script>

<template>
  <div class="main-content">
    <el-dialog
    v-model="dialogVisible"
    title="新增数据"
    >
      <el-form
      :model="form"
      :rules="rules"
      >
        <el-form-item label="id号">
          <el-input v-model="form.id"/>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username"/>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"/>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age"/>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="form.phone"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio value="男">男</el-radio>
            <el-radio value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="content-header">
      <h2 class="page-title">数据管理</h2>
      <div class="header-actions">
        <el-button type="primary" class="action-btn" @click="addDatas">
          <el-icon><Plus /></el-icon>
          新增数据
        </el-button>
        <el-button type="success" class="action-btn">
          <el-icon><Download /></el-icon>
          导出数据
        </el-button>
      </div>
    </div>
    
    <div class="content-body">
      <el-card class="data-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">数据列表</span>
            <div class="card-actions">
              <el-input
                placeholder="搜索数据..."
                class="search-input"
                clearable
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
          </div>
        </template>
        
        <el-scrollbar class="table-scrollbar">
          <el-table 
            :data="tableData" 
            class="data-table"
            stripe
            :header-cell-style="{ background: '#f8f9fa', color: '#333' }"
          >
            <el-table-column prop="id" label="用户ID号" width="60" align="center" >
              <template #default="scope">
                <el-tag type="info" size="small">{{ scope.row.id }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名/账号" width="120" align="center">
              <template #default="scope">
                <div class="name-cell">
                  <span class="name-text">{{ scope.row.username }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="120" align="center">
              <template #default="scope">
                <div class="name-cell">
                  <span class="name-text">{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="password" label="密码" width="120" align="center">
              <template #default="scope">
                <div class="name-cell">
                  <span class="name-text">{{ scope.row.password }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="120" align="center">
              <template #default="scope">
                <div class="name-cell">
                  <span class="name-text">{{ scope.row.age }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="120" align="center">
              <template #default="scope">
                <div class="name-cell">
<!--                  <span class="name-text">{{ scope.row.sex }}</span>-->
                  <el-tag
                      :type="scope.row.sex==='男'?'primary':'success'"
                      disable-transitions
                  >
                    {{scope.row.sex}}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="电话" width="120" align="center">
              <template #default="scope">
                <div class="name-cell">
                  <span class="name-text">{{ scope.row.phone }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="role_id" label="用户角色" width="120" align="center">
              <template #default="scope">
                <div class="name-cell">
<!--                  <span class="name-text">{{ scope.row.role_id }}</span>-->
                  <el-tag
                  :type="scope.row.role_id===0?'danger':(scope.row.role_id===1?'primary':'success')"
                  disable-transitions
                  >
                    {{ scope.row.role_id===0?'超级管理员':(scope.row.role_id===1?'管理员':'用户') }}
                  </el-tag>

                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" min-width="200">
              <template #default="scope">
                <div class="address-cell">
                  <el-icon class="location-icon"><Location /></el-icon>
                  <span>{{ scope.row.address }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template #default="scope">
                <div class="action-buttons">
                  <el-button type="primary" size="small" class="action-btn-small">
                    <el-icon><Edit /></el-icon>
                    编辑
                  </el-button>
                  <el-button type="success" size="small" class="action-btn-small">
                    <el-icon><View /></el-icon>
                    查看
                  </el-button>
                  <el-button type="danger" size="small" class="action-btn-small">
                    <el-icon><Delete /></el-icon>
                    删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
        
        <div class="table-footer">
          <el-pagination 
            background 
            layout="prev, pager, next" 
            :total="total"
            :page-size="7"
            :current-page="pageNum"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.main-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  padding: 20px;
  box-sizing: border-box;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0;
  flex-shrink: 0;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
  background: linear-gradient(135deg, #409EFF, #67C23A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.content-body {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.data-card {
  height: 100%;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input {
  width: 250px;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(64, 158, 255, 0.2);
  transition: all 0.3s ease;
}

.search-input :deep(.el-input__wrapper:hover) {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.table-scrollbar {
  flex: 1;
  margin: 0 -20px;
  padding: 0 20px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  max-height: calc(100vh - 400px);
}

.data-table {
  width: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.data-table :deep(.el-table__header) {
  background: transparent;
}

.data-table :deep(.el-table__body) {
  background: transparent;
}

.data-table :deep(.el-table) {
  border: 1px solid #e4e7ed;
}

.data-table :deep(.el-table th) {
  border-right: 1px solid #e4e7ed;
  border-bottom: 1px solid #e4e7ed;
}

.data-table :deep(.el-table td) {
  border-right: 1px solid #e4e7ed;
  border-bottom: 1px solid #e4e7ed;
}

.data-table :deep(.el-table th:last-child) {
  border-right: 1px solid #e4e7ed;
}

.data-table :deep(.el-table td:last-child) {
  border-right: 1px solid #e4e7ed;
}

.data-table :deep(.el-table__body tr:last-child td) {
  border-bottom: none;
}

.data-table :deep(.el-table__row) {
  transition: all 0.3s ease;
}

.data-table :deep(.el-table th) {
  padding: 16px 12px;
}

.data-table :deep(.el-table td) {
  padding: 16px 12px;
}

.data-table :deep(.el-table__row:hover) {
  background: rgba(64, 158, 255, 0.05) !important;
  transform: scale(1.01);
}

.name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.name-text {
  font-weight: 500;
  color: #333;
}

.address-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.location-icon {
  color: #67C23A;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.action-btn-small {
  border-radius: 6px;
  font-size: 12px;
  padding: 4px 8px;
  transition: all 0.3s ease;
}

.action-btn-small:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 16px;
  flex-shrink: 0;
}

.pagination-info {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.pagination {
  margin: 0;
}

.pagination :deep(.el-pagination__item) {
  border-radius: 6px;
  margin: 0 2px;
  transition: all 0.3s ease;
}

.pagination :deep(.el-pagination__item:hover) {
  transform: translateY(-1px);
}

.pagination :deep(.el-pagination__item.is-active) {
  background: #409EFF;
  border-color: #409EFF;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .header-actions {
    justify-content: center;
  }
  
  .page-title {
    font-size: 20px;
    text-align: center;
  }
  
  .card-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .search-input {
    width: 100%;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .table-footer {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.data-card {
  animation: fadeInUp 0.6s ease-out;
}

/* 滚动条美化 */
.table-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.table-scrollbar::-webkit-scrollbar-track {
  background: rgba(64, 158, 255, 0.1);
  border-radius: 4px;
}

.table-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(64, 158, 255, 0.5);
  border-radius: 4px;
}

.table-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(64, 158, 255, 0.7);
}

:deep(.el-scrollbar__bar) {
  background: rgba(64, 158, 255, 0.1);
}

:deep(.el-scrollbar__thumb) {
  background: rgba(64, 158, 255, 0.3);
  border-radius: 4px;
}

:deep(.el-scrollbar__thumb:hover) {
  background: rgba(64, 158, 255, 0.5);
}
:deep(.el-table__row) {
  height: 100px; /* 增加行高 */
}

:deep(.el-table .el-table__cell) {
  padding: 26px 0; /* 增加单元格内边距 */
  border-right: 1px solid #e4e7ed !important;
}
</style>